define([
  'fe-header'
], (...vue) => {

  const [
    FeHeader
  ] = vue;

  const Personal = {
    template: `<main>

    <fe-header :btnData='btnData'>
    </fe-header>

    <article class="am-container am-padding-sm am-margin-vertical dg-art">
      <div class="am-g">

        <!-- 个人资料 -->
        <div class="am-u-sm-12 am-u-md-3">
          <img class="am-circle am-img-responsive am-center" src="./static/2.jpg" alt="">

          <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />

          <p>资料、头像可修改</p>
        </div>

        <div class="am-u-sm-12 am-u-md-9">
          <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
            <ul class="am-tabs-nav am-cf">
              <li class="am-active"><a href="[data-tab-panel-0]">我的作品</a></li>
              <li class=""><a href="[data-tab-panel-1]">新增作品</a></li>
            </ul>
            <div class="am-tabs-bd">

              <div data-tab-panel-0 class="am-tab-panel am-active">
                <table class="am-table">
                  <thead>
                    <tr>
                      <th>作品名称</th>
                      <th>上传时间</th>
                      <th>大赛id</th>
                      <th>作品状态</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>作品1</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-warning">待审核</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>作品2</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-warning">待审核</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>作品3</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-danger">不通过</td>
                      <td><a href="" class="am-text-danger">删除</a>&nbsp;<a href="#">修改</a></td>
                    </tr>
                    <tr>
                      <td>作品4</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-success">通过</td>
                      <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                      <td>作品5</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-warning">待审核</td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div data-tab-panel-1 class="am-tab-panel ">
                <div class="am-g">
                  <div class="am-u-sm-3">
                    栏位名称
                  </div>
                  <div class="am-u-sm-9">
                    栏位
                  </div>
                </div>
              </div>

            </div>
          </div>

          <!-- <div class="am-tabs" data-am-tabs="{ noSwipe: 1 }" id="">
            <ul class="am-tabs-nav am-nav am-nav-tabs">
              <li class="am-active"><a href="javascript: void(0)">我的作品</a></li>
              <li><a href="javascript: void(0)">新增作品</a></li>
            </ul>

            <div class="am-tabs-bd">

              <!-- 作品列表
              <div class="am-tab-panel am-active">
                <table class="am-table">
                  <thead>
                    <tr>
                      <th>作品名称</th>
                      <th>上传时间</th>
                      <th>大赛id</th>
                      <th>作品状态</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>作品1</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-warning">待审核</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>作品2</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-warning">待审核</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>作品3</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-danger">不通过</td>
                      <td><a href="" class="am-text-danger">删除</a>&nbsp;<a href="#">修改</a></td>
                    </tr>
                    <tr>
                      <td>作品4</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-success">通过</td>
                      <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                      <td>作品5</td>
                      <td>2017-12-22</td>
                      <td>q1q1</td>
                      <td class="am-text-warning">待审核</td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <!-- 新增作品
              <div class="am-tab-panel">
                新增作品
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </article>
    </main>`.replace(/[\r\n]/g, ''),
    data() {
      return {
        btnData: [
          {
            name: '返回首页',
            href: '/'
          }
        ]
      }
    },
    components: {
      FeHeader
    }
  }

  return Personal;
})